<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="js/showcase.js" type="text/javascript">
</script>
<script type="text/javascript">
var fadeimage=new Array();
fadeimage[0]=new Array();
fadeimage[1]=new Array();
fadeimage[0][0]=["images/showcasesimple.png", "", "","Artist1"];
fadeimage[1][0]=["images/showcasesimple2.png", "", "","Artist2"];
fadeimage[0][1]=["images/showcasesimple3.png", "", "","Artist3"];
fadeimage[1][1]=["images/showcasesimple4.png", "", "","Artist4"];
fadeimage[0][2]=["images/showcasesimple5.png", "", "","Artist5"];
fadeimage[1][2]=["images/showcasesimple6.png", "", "","Artist6"];
</script>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Untitled Document</title>
</head>

<body style="text-align:center; margin-top:0px; margin-left:0px; margin-right:0px; margin-bottom:0px">
<script language="javascript1.2" src="imgfade.js"></script>
<table style="width:690px;" frame="border" cellpadding="0" cellspacing="0">
<tr style="vertical-align:middle">
<td style="border:none; width:36px; text-align:left"><img src="images/showcasetitle.png" style="vertical-align:bottom; border:none" /></td>
<td style="text-align:center; vertical-align:middle; padding:0px 0px 0px 0px; width:109px; border:none" align="center" valign="middle">
<script type="text/javascript">
					new fadeshow(fadeimage[0], 83, 124, 0, 4000, 0,'RandomSort');
</script></td>
<td style="border:none; text-align:center; vertical-align:middle">
<script type="text/javascript">
					new fadeshow(fadeimage[1], 83, 124, 0, 4000, 0,'RandomSort');
</script></td>
<td style="border:none; text-align:center; vertical-align:middle"><table style="margin-left:auto; margin-right:auto">
<tr><td>
<script language="javascript">
function mys(pac,target)
{
if (pac>100)
{
window.clearTimeout(timer);
document.getElementById("sta").onclick=new Function("javascript:timer=window.setTimeout('mys(0,"+(1-target)+")',50);");
document.getElementById("canvas_"+(1-target)+"").innerHTML='<img src="images/showcasesimple3.png" style="vertical-align:bottom; border:none" />';
}
else
{
fad(pac,target);
pac=pac+1;
setTimeout('mys('+pac+','+target+');',50);
//setTimeout('fad('+pac+');',1000);
}
}
function fad(pac,target)
{
/*var sty0="position:absolute;width:82px;height:114px;top:0;left:0;";
sty0+="filter:progid:DXImageTransform.Microsoft.alpha(opacity=";
sty0+=pac;
sty0+=");opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:#FFFFFF";
document.getElementById("canvas_0").style=sty0;
var sty1="position:absolute;width:82px;height:114px;top:0;left:0;";
sty1+="filter:progid:DXImageTransform.Microsoft.alpha(opacity=";
sty1+=""+(100-pac)+"";
sty1+=");opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:#FFFFFF";
document.getElementById("canvas_1").style=sty1;*/
bow=getOs();
if (bow=='Firefox')
{
document.getElementById("canvas_"+target+"").style.opacity=pac/100;
document.getElementById("canvas_"+(1-target)+"").style.opacity=1-(pac/100);
}
else 
{if(bow=='MSIE')
{
document.getElementById("canvas_"+target+"").style.filter="alpha(opacity="+pac+")";
document.getElementById("canvas_"+(1-target)+"").style.filter="alpha(opacity="+(100-pac)+")";
//document.getElementById("canvas_0").filters.alpha.opacity=(100-pac);
}
else
{
document.getElementById("canvas_"+target+"").style.opacity=pac/100;
document.getElementById("canvas_"+(1-target)+"").style.opacity=1-(pac/100);
document.getElementById("canvas_"+target+"").style.filter="alpha(opacity="+pac+")";
document.getElementById("canvas_"+(1-target)+"").style.filter="alpha(opacity="+(100-pac)+")";
}
}
}
function getOs()
{ 
    var OsObject = ""; 
   if(navigator.userAgent.indexOf("MSIE")>0) { 
        return "MSIE"; 
   } 
   if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){ 
        return "Firefox"; 
   } 
   if(isSafari=navigator.userAgent.indexOf("Safari")>0) { 
        return "Safari"; 
   } 
   if(isCamino=navigator.userAgent.indexOf("Camino")>0){ 
        return "Camino"; 
   } 
   if(isMozilla=navigator.userAgent.indexOf("Gecko")>0){ 
        return "Gecko"; 
   } 
   
}
</script>
<div id="master" style="position:relative;width:82px;height:114px;overflow:hidden;">
<div id="canvas_0" style="position:absolute;width:82px;height:114px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:#FFFFFF"><img src="images/showcasesimple.png" style="vertical-align:bottom; border:none" /></div>
<div id="canvas_1" style="position:absolute;width:82px;height:114px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:#FFFFFF"><img src="images/showcasesimple2.png" style="vertical-align:bottom; border:none" /></div>
</div>
</td></tr>
<tr><td style="vertical-align:middle; text-align:left; font-size:9px; border:none">Atrist</td></tr></table></td>
<td style="border:none; text-align:center; vertical-align:middle">
<table style="margin-left:auto; margin-right:auto">
<tr><td><img src="images/showcasesimple.png" style="vertical-align:bottom; border:none" /></td></tr>
<tr><td style="vertical-align:middle; text-align:left; font-size:9px; border:none">Atrist</td></tr></table>
</td>
<td style="border:none; text-align:center; vertical-align:middle"><table style="margin-left:auto; margin-right:auto">
<tr><td><img src="images/showcasesimple.png" style="vertical-align:bottom; border:none" /></td></tr>
<tr><td style="vertical-align:middle; text-align:left; font-size:9px; border:none">Atrist</td></tr></table></td>
<td style="border:none; text-align:center; vertical-align:middle"><table style="margin-left:auto; margin-right:auto">
<tr><td><img src="images/showcasesimple.png" style="vertical-align:bottom; border:none" /></td></tr>
<tr><td style="vertical-align:middle; text-align:left; font-size:9px; border:none">Atrist</td></tr></table></td>
</tr>
</table>
<button id="sta" onclick="javascript:timer=window.setTimeout('mys(0,1)',50);" name="start">start</button><br/>
</body>
</html>
